<template>
  <div class="flex flex-col h-full gr-2 w-full">
    <div class="w-full flex justify-between items-center container-header py-4 px-4">
      <div class="flex gap-2">
        <div class="text-bold">
          {{ t["模板名称"] }} <a-tag>{{ stageConfig.name }}</a-tag>
        </div>

        <a-popover position="bottom" trigger="click">
          <a-button>
            <div>{{ t["更多"] }}</div>
            <IconDown />
          </a-button>
          <template #content>
            <div class="flex flex-col">
              <div class="flex gap-2 text-gray-500">
                <div class="text-[12px]">
                  {{ t["模板尺寸"] }}
                  <a-tag>{{ stageConfig.w }}x{{ stageConfig.h }}</a-tag>
                </div>
              </div>
              <div class="flex items-center text-[12px] gap-2">
                {{ t["模板颜色"] }}
                <a-tag>
                  {{
                    deviceColorList[stageConfig.deviceColor]?.label || t[stageConfig.deviceColor]
                  }}
                </a-tag>
              </div>
              <div class="text-[12px]">
                {{ t["绑定数量"] }}
                <a-tag>{{ number }}</a-tag>
              </div>
            </div>
          </template>
        </a-popover>
      </div>
      <div class="flex gap-2 items-center">
        <a-button @click="previewImage">
          <IconRefresh />
        </a-button>
      </div>
    </div>
    <div class="flex-1 h-full overflow-auto" ref="elRef">
      <div class="w-full h-full flex justify-center items-center" :style="{ scale }">
        <a-image width="80%" :src="previewImageSrc" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getBoundCount, previewTpl } from "@/api/service/template/template";
import { deviceColorList } from "@/data/options/selection";
import { stageConfig } from "@/views/paint/modules/data/stage";

import { previewImageSrc } from "./bus";

const elRef = ref<HTMLElement>();
const t = translate("公共模块");
const loading = ref(true);
const number = ref(0);

const scale = ref(1);
let wheelEvent: any = null;
/**
 * 注释: 生成预览
 *
 * */
const previewImage = async () => {
  loading.value = true;
  stageConfig.value.components = [];
  const result = await previewTpl({
    stage: stageConfig.value,
    // templateList: currentStage.value.components,
    templateList: []
  });
  previewImageSrc.value = result.data;
  loading.value = false;
};

const onWheel = (e: WheelEvent) => {
  e.preventDefault();
  if (e.deltaY > 0) {
    scale.value += 0.05;
  } else {
    scale.value -= 0.05;
  }
};
onMounted(async () => {
  const templateId = stageConfig.value.id;
  if (templateId) {
    const result = await getBoundCount(templateId);
    number.value = parseInt(result.data, 10);
  }
  previewImage();
  nextTick(() => {
    elRef.value?.addEventListener("wheel", onWheel, { passive: false });
  });
});

onUnmounted(() => {
  elRef.value?.removeEventListener("wheel", onWheel);
});
</script>

<style lang="scss" scoped>
.image-container {
  background-color: #f8f8f8;
  color: black;
  max-height: 500px;

  .container-header {
    background-color: white;
    line-height: 24px;
  }

  .dispatch {
    background-color: var(--primary);
    border-radius: 4px;
    text-align: center;
    color: white;
    height: 24px;
    line-height: 24px;
  }

  img {
    object-fit: contain;
  }

  .tags {
    background-color: #333;
    color: white;
    border-radius: 2px;
    padding: 0 12px;
  }
}
</style>
